<template>
	<u-form :model="form" ref="uForm" :rules="rules">
		<u-form-item label="用户名" prop="userName"><u-input v-model="form.userName" /></u-form-item>
		<u-form-item label="密码" prop="userPassword"><u-input v-model="form.userPassword" /></u-form-item>
		<u-button @click="submit">提交</u-button>
	</u-form>
</template>

<script>
	import {
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				form: {
					userName: '',
					userPassword: '',
				},
				rules: {
					userName: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					userPassword: [{
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				}
			};
		},
		methods: {
			...mapActions(["userLogin"]),
			submit() {
				this.$refs.uForm.validate().then(res => {
					//登录请求
					this.userLogin()
					uni.$u.toast('校验通过')
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 500)

				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}

	}
</script>

<style lang="scss">

</style>